<template>
  <div id="teamPage">
    <van-search v-model="searchText" placeholder="请输入搜索队伍"
                @search="onSearch"
    />
    <van-tabs v-model:active="active" @change="onTabChange">
      <van-tab title="公开" name="public"></van-tab>
      <van-tab title="加密" name="secret"></van-tab>
    </van-tabs>

    <div style="margin-bottom: 5px"></div>

    <team-card-list :team-list="teamList" :loading="loading"></team-card-list>
    <van-button class="add-button" type="primary" @click="doCreateTeam" icon="plus"></van-button>
    <van-empty v-if="(!teamList||teamList.length<1)&&!loading" description="数据为空"></van-empty>
  </div>
</template>

<script setup lang="ts">

import {useRouter} from "vue-router";
import TeamCardList from "../components/TeamCardList.vue";
import {onMounted, ref} from "vue";
import myAxios from "../plugins/myAxios.js";
import {Toast} from "vant";

const router = useRouter();

const searchText = ref('');

const teamList = ref([]);

const loading = ref(false);

const active = ref('public');

/**
 * 搜索队伍
 * @param val
 * @param status
 * @returns {Promise<void>}
 */
const listTeam = async (val = '', status = 0) => {
  loading.value = true;
  const res = await myAxios.get('/team/list', {
    params: {
      searchText: val,
      pageNum: 1,
      status
    }
  });
  console.log(res)
  if (res?.code === 0) {
    teamList.value = res.data;
  } else {
    Toast.fail('加载队伍失败，请刷新重试');
  }
  loading.value = false;
}

const onTabChange = (name) => {
  if (name === 'public') { // 查公开
    listTeam(searchText.value, 0);
  } else if (name === 'secret') { // 查加密
    listTeam(searchText.value, 2);
  }
}

onMounted(() => {
  listTeam()
})

const onSearch = (val) => {
  listTeam(val);
}

// 跳转到加入队伍页
const doCreateTeam = () => {
  router.push({
    path: '/team/add'
  })
};
</script>

<style scoped>

</style>
